<!-- 评价组件 -->
<template>
	<uni-popup ref="evalPopup" type="center" :mask-click="false">
		<view class="eval-popup">
			<view class="title">评价</view>
			<uni-icons type="closeempty" size="20" class="modal-icon" @click="close"></uni-icons>
			<view class="rating-group">
				<!-- 商品评分 -->
				<view class="rating-item">
					<text class="label">商品评分：</text>
					<uni-rate :value="5" color="#bbb" active-color="red"></uni-rate>
					<text class="score">5分</text>
				</view>
				<!-- 客服评分 -->
				<view class="rating-item">
					<text class="label">客服评分：</text>
					<uni-rate :value="4" color="#bbb" active-color="red"></uni-rate>
					<text class="score">4分</text>
				</view>
				<!-- 物流评分 -->
				<view class="rating-item">
					<text class="label">物流评分：</text>
					<uni-rate :value="4" color="#bbb" active-color="red"></uni-rate>
					<text class="score">4分</text>
				</view>
				<!-- 发货时间评分 -->
				<view class="rating-item">
					<text class="label">发货时间评分：</text>
					<uni-rate :value="1" color="#bbb" active-color="red"></uni-rate>
					<text class="score">1分</text>
				</view>
			</view>
			<!-- 意见反馈 -->
			<view class="feedback">
				<text class="label">意见反馈：</text>
				<textarea placeholder="请输入您宝贵的意见" class="input"></textarea>
			</view>
			<!-- 操作按钮 -->
			<!-- <view class="btn-group">
				<button class="confirm" @click="submit">确定</button>
				<button class="cancel" @click="close">取消</button>
			</view> -->
			<view class="button-group">
				<button class="btn cancel" @click="close">取消</button>
				<button class="btn confirm" @click="submit">确定</button>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		name: "evaluationPopup",
		data() {
			return {

			};
		},
		methods: {
			open() {
				this.$refs.evalPopup.open();
			},
			close() {
				this.$refs.evalPopup.close();
			},
			submit() {
				console.log('评价提交');
				this.close();
				uni.showToast({
					title: '评价成功',
					icon: 'none'
				});
			}
		}
	}
</script>

<style scoped>
	.eval-popup {
		width: 540px;
		height: 360px;
		/* padding: 20px; */
		background: #fff;
		border-radius: 8px;
		position: relative;
	}

	.modal-icon {
		position: absolute;
		top: 8px;
		right: 12px;
	}

	.title {
		height: 40px;
		line-height: 40px;
		font-size: 16px;
		font-weight: 600;
		margin-bottom: 15px;
		/* text-align: center; */
		background-color: #F5F5F5;
		border-radius: 8px 8px 0 0;
		padding: 0 20px;
		box-sizing: border-box;
	}

	.rating-group {
		margin-bottom: 15px;
		padding: 0 20px;
	}

	.rating-item {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.label {
		width: 100px;
		font-size: 14px;
		color: #333;
	}

	.score {
		color: red;
		font-size: 14px;
		margin-left: 5px;
	}

	.feedback {
		margin-bottom: 15px;
		padding: 0 20px;
	}

	.input {
		width: 100%;
		height: 60px;
		border: 1px solid #eee;
		border-radius: 4px;
		padding: 10px;
		font-size: 14px;
		box-sizing: border-box;
		margin-top: 6px;
	}

	/* 按钮 */
	/* .btn-group {
		display: flex;
		justify-content: center;
		gap: 15px;
		padding: 20px;
	}

	.btn-group button {
		width: 100px;
		height: 36px;
		border-radius: 4px;
		font-size: 14px;
	}

	.confirm {
		background: red;
		color: #fff;
	}

	.cancel {
		background: #f5f5f5;
		color: #333;
	} */
	.button-group {
		display: flex;
		justify-content: space-between;
		margin: 30px auto;
		/* margin-bottom: 0; */
		width: 290px;
	}

	.btn {
		width: 25%;
		height: 30px;
		border-radius: 8px;
		font-size: 16px;
		line-height: 30px;
		font-size: 14px;
		/* margin-left: 60px; */
	}

	.btn.cancel {
		background: #f5f5f5;
		color: #333;
		/* margin-left: 120px; */
		/* margin-right: 20px; */
	}

	.btn.confirm {
		background: #E91F1B;
		color: #fff;
		margin-left: 0;
	}
</style>